<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div class="clock">
        <img src="" id="h1">
        <img src="" id="h2">时
        <img src="" id="m1">
        <img src="" id="m2">分
        <img src="" id="s1">
        <img src="" id="s2">秒
    </div>
    <script>
        // 利用当前的时间来决定你要显示的图片路径
        var date = new Date(); //得到一个时间对象
        // 一打开页面也需要显示时间
        renden(date)

        // 不断去获取最新的时间
        setInterval(function () {
            date = new Date();
            renden(date)
        }, 1000)

        // 因为页面一开始的是也显示当前的时间，一下代码需要在没有执行定时器之间需要写一遍
        // 定时器执行的时候，当前的时间有所有变化， 需要重计算时间，并更改 img路径
        // 以下代码需要在定时器重复写一遍
        // 都是实现根据时间更改图片的路径，需要封装
        function renden(date) {
            // 求时间对象的 时 分 秒
            var h = date.getHours(); //获取时间的 小时
            var m = date.getMinutes(); //获取时间的 分钟
            var s = date.getSeconds(); //获取时间的 秒

            // 如果 小时是两位数的 hours1 两位数的 第一位数 12 
            // 如果小时 是一位数 hours1 = 0
            var hours1 = h >= 10 ? parseInt(h / 10) : 0;
            var hours2 = h >= 10 ? h % 10 : h;
            h1.src = 'img/' + hours1 + '.png';
            h2.src = 'img/' + hours2 + '.png'

            // 计算分钟
            var minutes1 = m >= 10 ? parseInt(m / 10) : 0;
            var minutes2 = m >= 10 ? m % 10 : m;
            m1.src = 'img/' + minutes1 + '.png';
            m2.src = 'img/' + minutes2 + '.png'

            //计算秒数
            var seconds1 = s >= 10 ? parseInt(s / 10) : 0;
            var seconds2 = s >= 10 ? s % 10 : s;
            s1.src = 'img/' + seconds1 + '.png';
            s2.src = 'img/' + seconds2 + '.png'
        }
     </script>
</body>
</html>